<template>
  <div class="home">
    <el-container style="height: 100%">
      <!-- 侧栏 -->
      <el-aside
        width="200px"
        id="home-aside"
        style="height: 100%; background: pink"
      >
        <!-- 列表 -->
        <el-row class="tac" style="height: 100%; width: 100%">
          <el-col :span="12" style="height: 100%; width: 100%">
            <el-menu
              :default-active="active"
              style="height: 100%; width: 100%"
              class="el-menu-vertical-demo"
              background-color="#99CC33"
              text-color="#FFFF99"
              active-text-color="#fff"
              unique-opened
              router
            >
              <h3
                class="el-icon-food"
                style="color: #fff; margin: 10px 20px; text-align: center"
              >
                外卖商家中心
              </h3>
              <!-- 侧栏列表 -->
              <div v-for="item in roleList" :key="item.index">
                <!-- 不可折叠 -->
                <el-menu-item v-if="!item.children" :index="item.index">
                  <i style="color: #ffff99" :class="item.icon"></i>
                  <span slot="title">{{ item.name }}</span>
                </el-menu-item>
                <!-- 可折叠 -->
                <el-submenu :index="item.index" v-else>
                  <template slot="title">
                    <i style="color: #ffff99" :class="item.icon"></i>
                    <span>{{ item.name }}</span>
                  </template>
                  <!-- 子列表菜单 -->
                  <el-menu-item
                    v-for="child in item.children"
                    :key="child.index"
                    :index="child.index"
                    >{{ child.name }}</el-menu-item
                  >
                </el-submenu>
              </div>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>

      <el-container>
        <!-- 页头 -->
        <el-header class="home-header" style="height: 60px; line-height: 60px">
          <div>
            <span style="font-size: 18px"> {{titleText}} </span> 
             <span>{{titleText2}}</span>
            <!-- <span>添加帐号></span> -->
          </div>
          <div>
            <h4 style="cursor: pointer" v-show="show" @click="loginBtn">
              请先登录噢...( ＿ ＿)ノ｜
            </h4>
            <span
              >欢迎你 q(≧▽≦q)~ : <span>{{ userAcc }}</span>
            </span>
            <img @click="userImg" :src="userpho" alt="" />
          </div>
        </el-header>

        <!-- 内容 -->
        <el-main class="home-main">
          <el-card><router-view></router-view></el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { accountinfo, checktoken } from "@/apis/users";

export default {
  data() {
    return {
      //登录
      show: true,
      //侧栏导航
      asideList: [
        {
          index: "/home/main",
          icon: "el-icon-s-home",
          name: "后台首页",
          role: ["super", "normal"],
        },
        {
          index: "/home/ordermanager",
          icon: "el-icon-notebook-2",
          name: "订单管理",
          role: ["super", "normal"],
        },
        {
          index: "3",
          icon: "el-icon-shopping-bag-1",
          name: "商品管理",
          role: ["super", "normal"],
          children: [
            { index: "/home/goodslist", name: "商品列表" },
            { index: "/home/goodsadd", name: "商品添加" },
            { index: "/home/goodsclass", name: "商品分类" },
          ],
        },
        {
          index: "/home/shopmanager",
          icon: "el-icon-s-shop",
          name: "店铺管理",
          role: ["super"],
        },
        {
          index: "5",
          icon: "el-icon-user-solid",
          name: "帐号管理",
          role: ["super"],
          children: [
            { index: "/home/accountlist", name: "帐号列表" },
            { index: "/home/addaccount", name: "添加帐号" },
            { index: "/home/changepwd", name: "修改密码" },
          ],
        },
        {
          index: "6",
          icon: "el-icon-aim",
          name: "销售统计",
          role: ["super"],
          children: [
            { index: "/home/goodcensus", name: "商品统计" },
            { index: "/home/ordercensus", name: "订单统计" },
          ],
        },
      ],
      active: "/home/main", //激活列表
      userAcc: "", //用户名
      userpho: "", //头像
      id: localStorage.getItem("userId"), //id
      titleText:'',
      titleText2:'',
    };
  },

  methods: {
    //点击头像跳转
    userImg() {
      if (this.$route.path == "/home/personcenter") return;
      this.$router.push("/home/personcenter");
    },
    //登录
    loginBtn() {
      this.$router.push("/");
    },
  },
  computed: {
    //权限列表
    roleList() {
      return this.asideList.filter((obj) =>
        obj.role.includes(localStorage.role)
      );
    },
  },
  created() {
    //头像
    this.$bus.on("herderImgUpdate", (data) => {
      console.log(this.userpho);
      // console.log(data);
      let imgIp = this.userpho.substr(0, this.userpho.lastIndexOf("/") + 1);
      this.userpho = imgIp + data.imgUrl;
    });
    //激活列表
    this.active = this.$route.path;

    //获取帐号信息
    accountinfo({ id: this.id }).then((res) => {
      let data = res.data.accountInfo;
      // console.log(data);
      this.userAcc = data.account;
      this.userpho = data.imgUrl;
    }),
      //token
      checktoken({ token: localStorage.token }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 0) {
          this.show = false;
        }
      });
 
    //二级导航
    this.$bus.on('subTitle',(data,data2) =>{
        // console.log(data);
        this.titleText = data
        this.titleText2 = data2
    })

    this.$bus.on('HomeUserName',name=>{
      // console.log(name);
      this.userAcc = name
    })
 
 },
};
</script>

<style lang="less" scoped>
span {
  font-weight: bold;
}
a {
  color: green;
  text-decoration: none;
}

.home,
html,
body {
  height: 100%;
}
.home-aside {
  background: palevioletred;
}
.home-header {
  display: flex;
  justify-content: space-between;
  background: #ffcc00;
  color: #fff;

  img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 10px;
  }
}
.home-main {
  background: #f2f2f2;
}
</style>